<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>成长规划</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
	</head>
	<link rel="stylesheet" href="../../css/simple-line-icons.css">
	<link rel="stylesheet" href="../../css/mui.min.css">
	<link rel="stylesheet" href="../../css/mui-ext.css">
	<link rel="stylesheet" href="../../css/activity-style.css">
	<script src="../../js/mui.min.js"></script>
	<style type="text/css">
		.bg-default {
			background-color: #00a8c6;
			color: #FFFFFF;
		}
		
		.bg-default h1,
		.bg-default.a {
			color: #FFFFFF;
		}
		
		.mui-table-view-cell {
			font-size: 20px;
			color: #00a8c6;
		}
		
		.mui-table-view-cell a,
		.mui-collapse-content .mui-table-view-cell>a:not(.mui-btn) {
			font-size: 18px;
			color: #999;
		}
		
		.mui-table-view-cell.mui-active {
			background-color: #ecc158;
			color: #fff;
		}
		
		.mui-table-view-cell .cycle-btn {
			margin-top: 10px;
			width: 24px;
			height: 24px;
			display: inline-block;
			text-align: center;
			background-color: #fff;
			border: 1px solid #00a8c6;
			border-radius: 12px;
			background-clip: padding-box;
			position: absolute;
			right: 15px;
			font-size: 16px;
		}
		
		.mui-content,
		.mui-card {
			background-color: #e2f1f6;
			min-height: 800px;
		}
		
		#age_6 {
			top: 440px;
			left: 218px;
		}
		
		.planning-bird {
			min-height: 800px;
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
		}
		
		.bird-header {
			height: 230px;
			padding-top: 33px;
		}
		
		.bird-body {}
		
		.mui-table-view-cell.mui-collapse .mui-collapse-content {}
		
		.mui-table-view {
			background-color: transparent;
		}
		
		.bg-1,
		.bg-2 {
			text-align: center;
		}
		
		.age,
		.age.a {
			font-size: 16px;
			color: #fff;
		}
		
		.age-large {
			font-size: 24px;
			font-weight: 700;
		}
		
		.ages {
			width: 100%;
			height: 50px;
			top: 125px;
			position: absolute;
		}
		
		.age-row {
			line-height: 1;
		}
		
		.age-btn-left {
			background-image: url(../../img/plan/btn_nor_up_grade4_03.png);
			height: 25px;
			width: 115px;
			background-repeat: no-repeat;
			background-position: right;
			background-size: cover;
			text-align: left;
			padding-left: 20px
		}
		
		.age-btn-right {
			background-image: url(../../img/plan/btn_nor_up_grade1_03.png);
			height: 25px;
			width: 110px;
			background-repeat: no-repeat;
			background-position: left;
			background-size: cover;
			text-align: right;
			padding-right: 20px;
		}
		
		.active {
			color: #ffa201;
		}
		
		.mui-table-view-cell.mui-collapse .mui-table-view {
			margin-top: 0px;
			margin-bottom: 0px;
		}
	</style>

	<body>
		<!--<header class="mui-bar mui-bar-nav bg-default">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left bg-default"></a>
			<h1 class="mui-title">成长规划</h1>
		</header>-->
		<div class="mui-content">
 
			<div class="mui-card1">
				<div class="planning-bird">
					<div class="bird-header">
						<div class="eagle-header">
							<img class="" id="head-img" src="../../img/plan/eagle-block.png" width="100%" />
							<div class="ages1" style="position: relative;margin-top: -35%;">
								<div class="mui-row">
									<div class="age-row mui-col-xs-6">
										<div class="mui-row">
											<div class="mui-col-xs-12">
												<div class="">
													<a href="javascript:gradeActive(6);" class="age"><span id="grade61">
														<img class="" id="grade6" src="../../img/plan/age6.png" width="83%" style="margin-left: -3%;margin-top: 1%;"/>
													</span></a>
												</div>
											</div>
										</div>
									</div>
									<div class="age-row mui-col-xs-6">
										<div class="mui-row">
											<div class="mui-col-xs-12">
												<div class="">
													<a href="javascript:gradeActive(3);" class="age"><span id="grade31">
														<img class="" id="grade3" src="../../img/plan/age3.png" width="83%" style="float: right;margin-top: 1%;"/>
														
													</span></a>
												</div>
											</div>
											<div class="age-row mui-col-xs-0"></div>
										</div>
									</div>
								</div>
								<div class="mui-row" style="padding-top: 3px;">
									<div class="age-row mui-col-xs-6">
										<div class="mui-row">
											<div class="mui-col-xs-12">
												<div class="">
													<a href="javascript:gradeActive(5);" class="age"><span id="grade51">
														<img class="" id="grade5" src="../../img/plan/age5.png" width="83%" style="margin-left: 4%;margin-top: 0%;"/>
													</span></a>
												</div>
											</div>
										</div>
									</div>
									<div class="age-row mui-col-xs-6">
										<div class="mui-row">
											<div class="mui-col-xs-12">
												<div class="">
													<a href="javascript:gradeActive(2);" class="age"><span id="grade21">
														<img class="" id="grade2" src="../../img/plan/age2.png" width="83%" style="float: right;margin-right:4%;margin-top: -0%;"/>
													</span></a>
												</div>
											</div>
											<div class="age-row mui-col-xs-1"></div>
										</div>
									</div>
								</div>
								<div class="mui-row" style="padding-top: 5px;">
									<div class="age-row mui-col-xs-6">
										<div class="mui-row">
											<div class="mui-col-xs-12">
												<div class="">
													<a href="javascript:gradeActive(4);" class="age"><span id="grade41">
														<img class="" id="grade4" src="../../img/plan/age4.png" width="83%" style="margin-left: 14%;margin-top: 0%;"/>
													</span></a>
												</div>
											</div>
										</div>
									</div>
									<div class="age-row mui-col-xs-6">
										<div class="mui-row">
											<div class="age-row mui-col-xs-0"></div>
											<div class="mui-col-xs-12">
												<div class="">
													<a href="javascript:gradeActive(1);" class="age"><span id="grade11" class="active">
														<img class=" active" id="grade1" src="../../img/plan/age1-active.png" width="82%" style="float: right;margin-right:2%;"/>
													</span></a>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="bird-body">
						<ul id="attTypelst" class="mui-table-view">
							
							
						</ul>
					</div>
				</div>
			</div>

		</div>

	</body>
	<script src="../../js/bus/pubfun.js"></script>
	<script src="../../js/utils/http.utils.js"></script>
	<script>
		function hasClass(element, className) {
			var reg = new RegExp('(\s|^)' + className + '(\s|$)');
			return element.className.match(reg);
		}

		function addClass(element, className) {
			if(!this.hasClass(element, className)) {
				element.className += " " + className;
			}
		}

		function removeClass(element, className) {
			if(hasClass(element, className)) {
				var reg = new RegExp('(\s|^)' + className + '(\s|$)');
				element.className = element.className.replace(reg, ' ');
			}
		}
	</script>

	<script type="text/javascript">
		var activeGrade = document.getElementById("grade1");
		var gradeId = getQueryString(window.location.search, "grade");
		window.onload = function() {
			gradeActiveClass(gradeId);
			getAttentionLstByAge(ageNumToCode(gradeId));
		}

		function gradeActive(index) {
			gradeActiveClass(index);
			gradeActiveWindow(index);
		}
		
		
		
		function ageNumToCode($age){
			var $code;
			switch ($age){
				case "1":
					$code = "YNJ";
					break;
				case "2":
					$code = "ENJ";
					break;
				case "3":
					$code = "SNJ";
					break;
				case "4":
					$code = "SINJ";
					break;
				case "5":
					$code = "WNJ";
					break;
				case "6":
					$code = "LNJ";
					break;
				default:
					break;
			}
			return $code;
		}
		
		
		//根据年龄获取关注内容
		function getAttentionLstByAge($page){
			mui.ajax({
				url : $request_url.getAttentionLstForAge,
				type : "get",
				headers: {
					"Authorization": $headers_authorization
				},
				dataType : "json",
				data : {
					typeCode : $page
				},
				success : function(dat){
					if(dat.code == 0){
						if(dat.result != null && dat.result != ""){
							var $attTypeEle = document.getElementById("attTypelst");
							//循环外层填充关注类型ele
							for(var i = 0; i < dat.result.length; i ++){
								var $res = dat.result[i];
								var $li = document.createElement("li");
								$li.className = "mui-table-view-cell mui-collapse";
								var $waiA = document.createElement("a");
								$waiA.className = "mui-navigate-right";
								$waiA.href = "#";
								$waiA.innerHTML = $res.title;
								$li.appendChild($waiA);
								var $waiDiv = document.createElement("div");
								$waiDiv.className = "mui-collapse-content";
								var $lilstUl = document.createElement("ul");
								$lilstUl.className = "mui-table-view";
								for(var j = 0; j < $res.articles.length; j ++){
									var $leiLi = document.createElement("li");
									$leiLi.className = "mui-table-view-cell";
									$leiLi.innerHTML = '<a href="detail.html?attid='+ $res.articles[j].id +'&atttitle='+ $res.articles[j].title +'" class="mui-navigate-right">'+ $res.articles[j].title +'</a>';
									$lilstUl.appendChild($leiLi);
								}
								$waiDiv.appendChild($lilstUl);
								$li.appendChild($waiDiv);
								$attTypeEle.appendChild($li);
							}
						}
					}
				}, error : function(err){
					
				}
			});
		}
		

		function gradeActiveClass(index) {
			var ao = document.getElementById("grade" + index);
			if(ao == activeGrade) {
				return;
			} else {
				addClass(ao, "active");
				if(hasClass(ao, "active") || hasClass(ao, " active")) {
					ao.src = "../../img/plan/age" + index + "-active.png";
				} else {
					ao.src = "../../img/plan/age" + index + ".png";
				}
				if(activeGrade != undefined && activeGrade != null) {
					removeClass(activeGrade, "active");
					removeClass(activeGrade, " active");
					activeGrade.src = activeGrade.src.replace("-active", "");
				}
				activeGrade = ao;
			}
		}

		function gradeActiveWindow(index) {
			mui.openWindow({
				url: "plan-index.html?grade=" + index,
				show: {
					aniShow: 'fade-in',
					duration: 0
				},
				waiting: {
					autoShow: true
				}
			});
		}

		function planDetail(index) {
			var grade = activeGrade.getAttribute("id");
			switch(grade) {
				case "grade1":
					mui.openWindow({
						id: 'grade-window',
						url: 'detail.html?grade=' + index + "&age=" + $ages,
						show: {
							aniShow: 'fade-in',
							duration: 300
						},
						waiting: {
							autoShow: true
						}
					}); 
				break;    
			}
		}
	</script>

</html>